<template>
  <span class="review_star">

    <img v-for="item in stars" :key="item.key" :src="item.src" @click="changeStar(item.key)" mode="widthFix">
  </span>
</template>
<script>
export default {
  data () {
    return {
      star: Number,
      isreadonly: Boolean,
      stars: [
        {
          key: 1,
          src: '/static/images/star.png',
          active: true
        },
        {
          key: 2,
          src: '/static/images/star.png',
          active: true
        },
        {
          key: 3,
          src: '/static/images/star.png',
          active: true
        },
        {
          key: 4,
          src: '/static/images/star.png',
          active: true
        },
        {
          key: 5,
          src: '/static/images/star.png',
          active: true
        }
      ]
    }
  },
  props: ['number', 'readonly'],
  created () {
    this.star = this.number
    this.isreadonly = this.readonly
    for (var item of this.stars) {
      if (item.key <= this.star) {
        item.src = '/static/images/star.png'
      } else {
        item.src = '/static/images/star_empty.png'
      }
    }
  },
  methods: {
    changeStar (k) {
      if (this.isreadonly === false) {
        for (var item of this.stars) {
          if (item.key <= k) {
            item.src = '/static/images/star.png'
          } else {
            item.src = '/static/images/star_empty.png'
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.review_star{
  display: inline-block;
}
.review_star img{
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 2px;
}
</style>
